<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <title>项目管理</title>
    <base href="<%=basePath %>"/>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="assets/bootstrap-fileinput/css/fileinput.css">
    <link rel="stylesheet" href="assets/bootstrap-fileinput/themes/explorer/theme.css">
    <link rel="stylesheet" href="assets/layui/css/layui.css">
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/jquery.validator.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="assets/bootstrap-fileinput/js/locales/zh.js"></script>
    <script src="assets/bootstrap-fileinput/themes/explorer/theme.js"></script>
    <script src="assets/layui/layui.all.js"></script>

</head>
<body>
<div class="Hui-article">
    <form id="itemForm">
        <div class="container">
            <div class="col-lg-10 col-lg-offset-1">
                <div class="panel-body">
                <input type="text" name="itemName" id="itemName" placeholder="项目名称" style="width:250px"
                       class="input-text" value="${param.itemName}">
                <input type="hidden" name="pageSize" value="5">
                <button name="check" id="" class="btn-sm btn-primary" type="submit"> 搜索
                </button>
            </div>
                <table id="itemTable" class="table table-hover table-bordered">
                    <thead>
                    <tr class="text-c">
                       <th width="80" style="text-align: center">项目编号</th>
                        <th width="100" style="text-align: center">项目名称</th>
                        <th width="100" style="text-align: center">所属科室</th>
                        <th width="100" style="text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody  style="text-align: center" id="itemTbody">
                    <tr class="text-c">
                        <td colspan="5">
                            加载中。。。
                        </td>
                    </tr>
                    </tbody>
                </table>
                <a data-toggle='modal' data-target='#add_item' onclick="show_add_item()" class="btn-sm btn-primary radius">添加项目</a>
                <a data-toggle='modal' data-target='#batch_import' class="btn-primary btn-sm">excel批量导入细项</a>
                <%--<a href="javascript:;" data-target='#add_item' onclick="detail_add('excel批量导入细项','batch_add.action','','530')"--%>
                   <%--class="btn-sm btn-primary radius">excel批量导入细项</a>--%>
                <div id="page" style="float: right">
                    总共1页，当前第1页，一页5行，总共0行。
                    <a class="btn-sm btn-primary">上一页</a>
                    <a class="btn-sm btn-primary">下一页</a>
                </div>
            </div>
        </div>
    </form>
    <div class="modal fade" id="add_item">
        <div class="modal-dialog" style="width: 600px">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <form action="item/addItem.action" method="post" id="addItemFrom">
                    <div class="modal-header" style="text-align: center">
                        <label>添加项目</label>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body" style="overflow:auto">
                        <table>
                            <tr>
                                <td>项目名：</td>
                                <td><input type="text" class="input-text" placeholder="项目名" id="add_itemName" name="itemName" onblur="nonEmpty(this.id, '项目名')"></td>
                            </tr>
                            <tr>
                                <td>金额：</td>
                                <td><input type="text" class="input-text" placeholder="金额" id="itemMoney" name="itemMoney" onblur="nonEmpty(this.id,'金额')"></td>
                            </tr>
                            <tr>
                                <td>所属科室：</td>
                                <td><select name="deskId" id="deskId"><option value="" >请选择</option></select></td>
                            </tr>
                            <tr>
                                <td>输出方式：</td>
                                <td>
                                    <select name="resultType" id="resultType" >
                                        <option value="">请选择</option>
                                        <option value="机械输出">机械输出</option>
                                        <option value="手动输出">手动输出</option>
                                        <option value="图片输出">图片输出</option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="modal-footer">
                        <a class="btn-sm btn-primary" onclick="add_item()">提交</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="batch_import">
        <div class="modal-dialog" style="width: 600px">
            <div class="modal-content">
                <!-- 模态框头部 -->
                <div class="modal-header" style="text-align: center">
                    <label>批量导入</label>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body" style="overflow:auto">

                            <input type="file" name="upfile" id="upfile"  class="file-loading"/>
                    <!--数据显示表格-->
                    <span class="col-lg-10 col-lg-offset-1" id="reshint" style="color: red" ></span>
                    <table id="gridImport" class="table table-striped table-bordered table-hover" cellpadding="0" cellspacing="0"
                           border="0">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        prePage(1);

        //0.初始化fileinput
        var oFileInput = new FileInput();
        oFileInput.Init("upfile", "detail/upload.action");
    });

    function add_item() {
        $.post(
            "item/addItem.action",
            $("#addItemFrom").serialize(),
            function (msg) {
                console.log(msg);
                if (msg = "success") {
                    alert("添加成功！");
                    $(document).ready(function () {
                        prePage(1);
                    });
                } else {
                    alert("添加失败！");
                }
            }),"text";


    }

    //前端非空验证（标签ID，提示语）
    function nonEmpty(input, tips) {
        var inputval = $("#" + input).val();
        if (!inputval) {
            layer.tips('请输入' + tips + '!', '#' + input, {tips: [2, '#CC3333']});
            return false;
        }
        return true;
    }


    function prePage(pageNum) {
        if (pageNum > 0) {
            $.post('item/findAllItem.action?pageNum=' + pageNum,
                $('#itemForm').serialize(),
                function (itemList) {
                    if (itemList.list.length == 0) {
                        $('#itemTbody').append(
                            "<tr>" +
                            "<td colspan='5'>没有符合条件的数据</td>" +
                            "</tr>"
                        );
                    } else {
                        $('#itemTbody').html(null);
                        itemList.list.forEach(function (item) {
                            $('#itemTbody').append(
                                "<tr>" +
                               "<td>" + item.itemId + "</td>" +
                                "<td>" + item.itemName + "</td>" +
                                "<td>" + item.desk.deskName + "</td>" +
                                "<td><a class='btn-primary btn-sm' data-toggle='modal' data-target='#modal' onclick='article_edit(" + item.itemId + ")'>管理细项</a></td>" +
                                "</tr>"
                            )
                        });
                        $('#page').html(null);
                        $('#page').append("当前第"+itemList.pageNum+"页, 总共"+itemList.pages+"页，每页"+itemList.pageSize+"行，总共"+itemList.total+"行。");
                        $('#page').append("<a class='btn-sm btn-primary' onclick='prePage(" + itemList.prePage + ")'>上一页</a> ");
                        $('#page').append("<a class='btn-sm btn-primary' onclick='prePage(" + itemList.nextPage + ")'>下一页</a>");

                    }
                }
            )
        }
    }

    function show_add_item() {
        $.post("desk/getDesk.action", function (desks) {
            $('#deskId').html(null);
            $("#deskId").append("<option value=''>请选择</option>");
            desks.forEach(function (desk) {
                $("#deskId").append(
                    "<option value='" + desk.deskId + "'>" + desk.deskName + "</option>"
                );
            });
        });
    }

    function article_edit(id) {
        location.href = "detail/findItemdetails.action?itemId=" + id;
    }
    //初始化fileinput
    var FileInput = function () {
        var oFile = new Object();
        //初始化fileinput控件（第一次初始化）
        oFile.Init = function (ctrlName, uploadUrl) {
            var control = $('#' + ctrlName);
            //初始化上传控件的样式
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: uploadUrl, //上传的地址
                allowedFileExtensions: ['xlsx', 'xls'],//接收的文件后缀
                showUpload: true, //是否显示上传按钮
                showCaption: true,//是否显示标题
                showPreview:false,
                browseClass: "btn btn-primary", //按钮样式
                dropZoneEnabled: false,//是否显示拖拽区域
                //minImageWidth: 50, //图片的最小宽度
                //minImageHeight: 50,//图片的最小高度
                //maxImageWidth: 1000,//图片的最大宽度
                //maxImageHeight: 1000,//图片的最大高度
                //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                //minFileCount: 0,
                maxFileCount: 1, //表示允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                validateInitialCount: true,
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                // msgFilesTooMany: "最多只能上传({n}) 超过允许的最大数值{m}！",
                msgFilesTooMany: "一次只能上传{m}个文件！",
                layoutTemplates: {
                    // actionDelete:'', //去除上传预览的缩略图中的删除图标
                    actionUpload: '',//去除上传预览缩略图中的上传图片；
                    //actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
                },
            });
            //导入文件上传完成之后的事件
            $("#upfile").on("fileuploaded", function (event, data, previewId, index) {
                var result = data.response; //后台返回的json
                var res='导入成功'+result.successNum;
                if (result.errorNum>0) {
                    res+='，失败'+result.errorNum+'，以下细项添加失败：';
                }
                $("#reshint").text(res);
                if(result.errList.length>0){
                    $('#gridImport').html(null);
                    $('#gridImport').append(
                        "<thead> <tr><td>细项名称</td><td>项目名称</td><td>单位</td><td>最小值</td><td>最大值</td></tr></thead>"
                    );
                    var str = "<tbody>";
                    for(var i=0;i<result.errList.length;i++){
                        str+="<tr>";
                        for(var j=0;j<result.errList[i].length;j++){
                            str+="<td>"+result.errList[i][j]+"</td>";
                        }
                        str+="</tr>";
                    }
                    str+="</tbody>";
                    $('#gridImport').append(str);
                }
            });
        }
        return oFile;
    };

</script>
</body>
</html>